<!--
 * @Author: your name
 * @Date: 2021-08-28 11:00:31
 * @LastEditTime: 2021-08-28 14:58:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-admin-template\src\views\setting\assignPermission.vue
-->
<template>
  <div>
    <div>
      <!-- show-checkbox：显示复选框 -->
      <!-- default-expand-all：是否默认节点 -->
      <!-- check-strictly：取消父子节点之间的关联 -->
      <!-- 为什么需要取消关联：因为页面权限 和 按钮权限是两个功能 -->
      <!-- 有的页面可能只需要页面权限，并不需要按钮权限 -->
      <el-tree
        ref="tree"
        :data="permissionList"
        default-expand-all
        show-checkbox
        check-strictly
        node-key="id"
        :props="defaultProps"
        @node-click="handleNodeClick"
      />
    </div>

    <el-row class="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button size="small" @click="cancelButton">取 消</el-button>
        <el-button size="small" type="primary" @click="setRolesBtn">确 定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 获取权限列表
import { getPermissionList } from '@/api/permission'
// 渲染树形结构
import { transTree } from '@/utils/index'
// 根据 id 获取角色详情
import { getRoleId, assignPerm } from '@/api/setting'
export default {
  name: 'AssignPermission',
  props: {
    roleId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      permissionList: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created() {
    // console.log(this.roleId)
    // 调用获取权限列表的方法
    this.getPermissionList()
    // 调用获取已有权限的方法
    this.getRoleId()
  },
  methods: {
    // 获取已有权限
    async getRoleId() {
      const res = await getRoleId(this.roleId)
      //   console.log(res) 找到 res.data.permIds 角色的权限，进行渲染
      // 使用 tree 提供的 setCheckedKeys 方法回填权限
      this.$refs.tree.setCheckedKeys(res.data.permIds)
    },

    //   点击属性结构节点时触发
    handleNodeClick() {},

    // 获取权限列表的方法
    async getPermissionList() {
      const res = await getPermissionList()
      this.permissionList = transTree(res.data, '0')
    },

    // 取消按钮
    cancelButton() {
      this.$emit('close')
    },

    // 点击确定，设置权限按钮
    async setRolesBtn() {
      // 需要先获取已经勾选的节点
      const permIds = this.$refs.tree.getCheckedKeys()

      // 发起分配权限的请求
      const res = await assignPerm({ id: this.roleId, permIds })

      // 提示信息
      this.$message.success(res.message)
      //   关闭弹框
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  margin-top: 30px;
}
</style>
